<template>
  <div class="article-edit">
    <el-card class="!border-none" shadow="never">
      <el-page-header :content="$route.meta.title" @back="$router.back()" />
    </el-card>
    <el-card class="mt-4 !border-none" shadow="never">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleChange">
        <el-tab-pane label="赛事瞬间" name="first">
          <div class="xl:ml-20">
            <el-form-item label="比赛内容" prop="content">
              <editor v-model="formData.content" :height="580"/>
            </el-form-item>
          </div>
        </el-tab-pane>
        <el-tab-pane label="赛事比分" name="second">
          <el-row style="justify-content: center;">
            <div>
              <div class="m-box">
                <div class="m-process">
                  <div class="m-processLf">
                    <div class="u-list"><p>第五局</p>
                      <p>{{ playData.playerOneFiveScore }}</p></div>
                    <div class="u-list"><p>第四局</p>
                      <p>{{ playData.playerOneFourScore }}</p></div>
                    <div class="u-list"><p>第三局</p>
                      <p>{{ playData.playerOneThreeScore }}</p></div>
                    <div class="u-list"><p>第二局</p>
                      <p>{{ playData.playerOneTwoScore }}</p></div>
                    <div class="u-list"><p>第一局</p>
                      <p>{{ playData.playerOneOneScore }}</p></div>
                  </div>
                  <div class="m-processAgainst">
                    <div class="u-list u-team"><p>红队</p>
                      <template v-for="name in formatName(playData.playerOne)">
                        <span>{{name}}</span>
                      </template>
                    </div>
                    <div class="u-list u-time">
                      <p>
                        <span v-if="playData.status==0">比赛进行</span>
                        <span v-if="playData.status==3">比赛结束</span>
                      </p>
                      <p>{{playData.playerOneTotalScore}}<span class="u-dot-pad">:</span>{{playData.playerTwoTotalScore}}</p></div>
                    <div class="u-list u-team"><p>蓝队</p>
                      <template v-for="name in formatName(playData.playerTwo)">
                        <span>{{name}}</span>
                      </template>
                    </div>
                  </div>
                  <div class="m-processRt">
                    <div class="u-list"><p>第一局</p>
                      <p>{{ playData.playerTwoOneScore }}</p></div>
                    <div class="u-list"><p>第二局</p>
                      <p>{{ playData.playerTwoTwoScore }}</p></div>
                    <div class="u-list"><p>第三局</p>
                      <p>{{ playData.playerTwoThreeScore }}</p></div>
                    <div class="u-list"><p>第四局</p>
                      <p>{{ playData.playerTwoFourScore }}</p></div>
                    <div class="u-list"><p>第五局</p>
                      <p>{{ playData.playerTwoFiveScore }}</p></div>
                  </div>
                </div>
              </div>
            </div>
          </el-row>

          <el-row v-for="round in playData.roundList" style="justify-content: center;">
            <div class="m-box" style="position: relative;">
              <div style="text-align: center;font-size: 18px;font-weight: 700;">第{{round.scoreNo}}局</div>
              <div style="text-align: center;font-size: 24px;">
                <p>{{ round.playOneTotal }}<span class="u-dot-pad">:</span>{{ round.playTwoTotal }}</p>
              </div>
              <div v-if="round.isEdit==true" @click="handleScoreRedTeam(round)" style="position: absolute;top: 20px;left: 20px;cursor:pointer;width: 50px;height: 50px;border-radius: 50%;background-color: red;text-align: center;padding-top: 5px;color:#fff;font-weight: 700;user-select: none;">红队<br/>得分</div>
              <div v-if="round.isEdit==true" @click="handleScoreBlueTeam(round)" style="position: absolute;top: 20px;right: 20px;cursor:pointer;width: 50px;height: 50px;border-radius: 50%;background-color: blue;text-align: center;padding-top: 5px;color:#fff;font-weight: 700;user-select: none;">蓝队<br/>得分</div>
              <div class="score score-header">
              <span>
                <span>红队</span>
              </span>
              <span>
                <span>1</span>
              </span>
              <span>
                <span>2</span>
              </span>
              <span>
                <span>3</span>
              </span>
              <span>
                <span>4</span>
              </span>
              <span>
                <span>5</span>
              </span>
              <span>
                <span>6</span>
              </span>
              <span>
                <span>7</span>
              </span>
              <span>
                <span>8</span>
              </span>
              <span>
                <span>9</span>
              </span>
              <span>
                <span>10</span>
              </span>
              <span>
                <span>11</span>
              </span>
              <span>
                <span>12</span>
              </span>
              <span>
                <span>13</span>
              </span>
              <span>
                <span>14</span>
              </span>
              <span>
                <span>15</span>
              </span>
              <span>
                <span>16</span>
              </span>
              <span>
                <span>17</span>
              </span>
              <span>
                <span>18</span>
              </span>
              <span>
                <span>19</span>
              </span>
              <span>
                <span>20</span>
              </span>
              <span>
                <span>21</span>
              </span>
              <span>
                <span>22</span>
              </span>
              <span>
                <span>23</span>
              </span>
              <span>
                <span>24</span>
              </span>
              <span>
                <span>25</span>
              </span>
              <span>
                <span>26</span>
              </span>
              <span>
                <span>27</span>
              </span>
              <span>
                <span>28</span>
              </span>
              <span>
                <span>29</span>
              </span>
              <span>
                <span>30</span>
              </span>
              <span>
                  <span>蓝队</span>
              </span>
              </div>
              <div style="display: flex;">
              <div class="score-team">
                <span>
                  <template v-for="name in formatName(playData.playerOne)">
                    <span>{{name}}</span>
                  </template>
                </span>
              </div>
              <div class="score-content">
                <div :class="{
                  'score': true,
                  'score-current': currentNo == round.scoreNo
                }">
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round1==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,1)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round1,1)" :class="{
                                'disabled-span': !round.isEdit,
                                'score-active': scoreActive==1,
                                'score-yuan': true,
                                'score-one': round.round1==1,
                                'score-two': round.round1==2
                              }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round2==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,2)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round2,2)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==2,
                        'score-yuan': true,
                        'score-one': round.round2==1,
                        'score-two': round.round2==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round3==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,3)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round3,3)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==3,
                        'score-yuan': true,
                        'score-one': round.round3==1,
                        'score-two': round.round3==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round4==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,4)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round4,4)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==4,
                        'score-yuan': true,
                        'score-one': round.round4==1,
                        'score-two': round.round4==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round5==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,5)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round5,5)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==5,
                        'score-yuan': true,
                        'score-one': round.round5==1,
                        'score-two': round.round5==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round6==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,6)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round6,6)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==6,
                        'score-yuan': true,
                        'score-one': round.round6==1,
                        'score-two': round.round6==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round7==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,7)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round7,7)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==7,
                        'score-yuan': true,
                        'score-one': round.round7==1,
                        'score-two': round.round7==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round8==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,8)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round8,8)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==8,
                        'score-yuan': true,
                        'score-one': round.round8==1,
                        'score-two': round.round8==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round9==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,9)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round9,9)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==9,
                        'score-yuan': true,
                        'score-one': round.round9==1,
                        'score-two': round.round9==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                  <span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        placement="top"
                        :disabled="(round.isEdit&&round.round10==0)||!round.isEdit"
                    >
                      <template #content>
                        <el-button link @click="handleRestRoundItem(round,10)">重置</el-button>
                      </template>
                        <span @click="handleSelectRound(round.round10,10)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==10,
                        'score-yuan': true,
                        'score-one': round.round10==1,
                        'score-two': round.round10==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round11==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,11)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round11,11)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==11,
                        'score-yuan': true,
                        'score-one': round.round11==1,
                        'score-two': round.round11==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round12==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,12)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round12,12)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==12,
                        'score-yuan': true,
                        'score-one': round.round12==1,
                        'score-two': round.round12==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round13==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,13)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round13,13)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==13,
                        'score-yuan': true,
                        'score-one': round.round13==1,
                        'score-two': round.round13==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round14==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,14)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round14,14)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==14,
                        'score-yuan': true,
                        'score-one': round.round14==1,
                        'score-two': round.round14==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round15==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,15)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round15,15)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==15,
                        'score-yuan': true,
                        'score-one': round.round15==1,
                        'score-two': round.round15==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round16==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,16)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round16,16)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==16,
                        'score-yuan': true,
                        'score-one': round.round16==1,
                        'score-two': round.round16==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round17==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,17)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round17,17)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==17,
                        'score-yuan': true,
                        'score-one': round.round17==1,
                        'score-two': round.round17==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round18==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,18)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round18,18)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==18,
                        'score-yuan': true,
                        'score-one': round.round18==1,
                        'score-two': round.round18==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round19==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,19)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round19,19)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==19,
                        'score-yuan': true,
                        'score-one': round.round19==1,
                        'score-two': round.round19==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round20==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,20)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round20,20)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==20,
                        'score-yuan': true,
                        'score-one': round.round20==1,
                        'score-two': round.round20==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round21==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,21)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round21,21)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==21,
                        'score-yuan': true,
                        'score-one': round.round21==1,
                        'score-two': round.round21==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round22==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,22)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round22,22)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==22,
                        'score-yuan': true,
                        'score-one': round.round22==1,
                        'score-two': round.round22==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round23==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,23)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round23,23)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==23,
                        'score-yuan': true,
                        'score-one': round.round23==1,
                        'score-two': round.round23==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round24==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,24)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round24,24)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==24,
                        'score-yuan': true,
                        'score-one': round.round24==1,
                        'score-two': round.round24==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round25==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,25)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round25,25)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==25,
                        'score-yuan': true,
                        'score-one': round.round25==1,
                        'score-two': round.round25==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round26==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,26)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round26,26)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==26,
                        'score-yuan': true,
                        'score-one': round.round26==1,
                        'score-two': round.round26==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round27==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,27)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round27,27)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==27,
                        'score-yuan': true,
                        'score-one': round.round27==1,
                        'score-two': round.round27==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round28==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,28)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round28,28)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==28,
                        'score-yuan': true,
                        'score-one': round.round28==1,
                        'score-two': round.round28==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round29==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,29)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round29,29)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==29,
                        'score-yuan': true,
                        'score-one': round.round29==1,
                        'score-two': round.round29==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round30==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,30)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round30,30)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==30,
                        'score-yuan': true,
                        'score-one': round.round30==1,
                        'score-two': round.round30==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                </div>
                <div :class="{
                  'score': true,
                  'score-current': currentNo == round.orderNum
                }">
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round31==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,31)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round31,31)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==31,
                        'score-yuan': true,
                        'score-one': round.round31==1,
                        'score-two': round.round31==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round32==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,32)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round32,32)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==32,
                        'score-yuan': true,
                        'score-one': round.round32==1,
                        'score-two': round.round32==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round33==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,33)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round33,33)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==33,
                        'score-yuan': true,
                        'score-one': round.round33==1,
                        'score-two': round.round33==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round34==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,34)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round34,34)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==34,
                        'score-yuan': true,
                        'score-one': round.round34==1,
                        'score-two': round.round34==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round35==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,35)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round35,35)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==35,
                        'score-yuan': true,
                        'score-one': round.round35==1,
                        'score-two': round.round35==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round36==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,36)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round36,36)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==36,
                        'score-yuan': true,
                        'score-one': round.round36==1,
                        'score-two': round.round36==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round37==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,37)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round37,37)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==37,
                        'score-yuan': true,
                        'score-one': round.round37==1,
                        'score-two': round.round37==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round38==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,38)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round38,38)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==38,
                        'score-yuan': true,
                        'score-one': round.round38==1,
                        'score-two': round.round38==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round39==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,39)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round39,39)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==39,
                        'score-yuan': true,
                        'score-one': round.round39==1,
                        'score-two': round.round39==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round40==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,40)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round40,40)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==40,
                        'score-yuan': true,
                        'score-one': round.round40==1,
                        'score-two': round.round40==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round41==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,41)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round41,41)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==41,
                        'score-yuan': true,
                        'score-one': round.round41==1,
                        'score-two': round.round41==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round42==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,42)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round42,42)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==42,
                        'score-yuan': true,
                        'score-one': round.round42==1,
                        'score-two': round.round42==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round43==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,43)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round43,43)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==43,
                        'score-yuan': true,
                        'score-one': round.round43==1,
                        'score-two': round.round43==2 }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round44==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,44)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round44,44)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==44,
                        'score-yuan': true,
                        'score-one': round.round44==1,
                        'score-two': round.round44==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round45==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,45)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round45,45)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==45,
                        'score-yuan': true,
                        'score-one': round.round45==1,
                        'score-two': round.round45==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round46==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,46)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round46,46)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==46,
                        'score-yuan': true,
                        'score-one': round.round46==1,
                        'score-two': round.round46==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round47==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,47)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round47,47)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==47,
                        'score-yuan': true,
                        'score-one': round.round47==1,
                        'score-two': round.round47==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round48==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,48)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round48,48)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==48,
                        'score-yuan': true,
                        'score-one': round.round48==1,
                        'score-two': round.round48==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round49==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,49)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round49,49)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==49,
                        'score-yuan': true,
                        'score-one': round.round49==1,
                        'score-two': round.round49==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round50==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,50)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round50,50)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==50,
                        'score-yuan': true,
                        'score-one': round.round50==1,
                        'score-two': round.round50==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round51==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,51)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round51,51)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==51,
                        'score-yuan': true,
                        'score-one': round.round51==1,
                        'score-two': round.round51==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round52==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,52)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round52,52)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==52,
                        'score-yuan': true,
                        'score-one': round.round52==1,
                        'score-two': round.round52==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round53==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,53)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round53,53)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==53,
                        'score-yuan': true,
                        'score-one': round.round53==1,
                        'score-two': round.round53==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round54==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,54)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round54,54)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==54,
                        'score-yuan': true,
                        'score-one': round.round54==1,
                        'score-two': round.round54==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round55==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,55)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round55,55)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==55,
                        'score-yuan': true,
                        'score-one': round.round55==1,
                        'score-two': round.round55==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round56==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,56)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round56,56)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==56,
                        'score-yuan': true,
                        'score-one': round.round56==1,
                        'score-two': round.round56==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round57==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,57)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round57,57)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==57,
                        'score-yuan': true,
                        'score-one': round.round57==1,
                        'score-two': round.round57==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round58==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,58)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round58,58)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==58,
                        'score-yuan': true,
                        'score-one': round.round58==1,
                        'score-two': round.round58==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                  <span>
                    <el-tooltip
                        class="box-item"
                        effect="light"
                        placement="top"
                        :disabled="(round.isEdit&&round.round59==0)||!round.isEdit"
                    >
                      <template #content>
                        <el-button link @click="handleRestRoundItem(round,59)">重置</el-button>
                      </template>
                        <span @click="handleSelectRound(round.round59,59)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==59,
                        'score-yuan': true,
                        'score-one': round.round59==1,
                        'score-two': round.round59==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                  <span>
                    <span>
                      <el-tooltip
                          class="box-item"
                          effect="light"
                          placement="top"
                          :disabled="(round.isEdit&&round.round60==0)||!round.isEdit"
                      >
                        <template #content>
                          <el-button link @click="handleRestRoundItem(round,60)">重置</el-button>
                        </template>
                        <span @click="handleSelectRound(round.round60,60)" :class="{
                        'disabled-span': !round.isEdit,
                        'score-active': scoreActive==60,
                        'score-yuan': true,
                        'score-one': round.round60==1,
                        'score-two': round.round60==2
                      }"></span>
                      </el-tooltip>
                    </span>
                  </span>
                </div>
              </div>
              <div class="score-team">
                <span>
                  <template v-for="name in formatName(playData.playerTwo)">
                    <span>{{name}}&nbsp;</span>
                  </template>
                </span>
              </div>
              </div>
              <div style="text-align: center;margin-top: 10px;">
                <el-button v-if="round.isEdit==true" @click="handleSubmitScore(round)">提交成绩</el-button>
              </div>
            </div>
          </el-row>
          <div style="text-align: center;">
            <el-button @click="handleAddItem" :disabled="playData.status==3||playData.status==1||playData.status==2">添加下一局</el-button>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <footer-btns>
      <el-button type="primary" @click="handleSave">保存</el-button>
    </footer-btns>
  </div>
</template>

<script lang="ts" setup name="articleListsEdit">
import type { FormInstance } from 'element-plus'

import { articleAdd, articleCateAll, articleDetail, articleEdit } from '@/api/article'
import { useDictOptions } from '@/hooks/useDictOptions'
import useMultipleTabs from '@/hooks/useMultipleTabs'
import {
  competionPlay,
  competionPlayDetail,
  competitionAdd,
  competitionDetail,
  competitionEdit, competitionPlayAdd, competitionPlayEdit, competitionPlayScoreEdit
} from "@/api/competition/competition";
import feedback from "@/utils/feedback";
const dialogVisible = ref(false)
const route = useRoute()
const router = useRouter()
const formData = reactive({
  id: '',
  matchId: '',
  content: ''
})
const { removeTab } = useMultipleTabs()

const getDetails = async () => {
  formData.matchId = <string>route.query.matchId
  competionPlayDetail({
    matchId: route.query.matchId
  }).then(res=>{
    if(res) {
      formData.matchId = res.matchId
      formData.content = res.content
    }
  })
}
const playData = reactive({
  playerOneOneScore: '',
  playerOneTwoScore: '',
  playerOneThreeScore: '',
  playerOneFourScore: '',
  playerOneFiveScore: '',
  playerTwoOneScore: '',
  playerTwoTwoScore: '',
  playerTwoThreeScore: '',
  playerTwoFourScore: '',
  playerTwoFiveScore: '',
  playerOneTotalScore: '',
  playerTwoTotalScore: '',
  playerOne: '',
  playerTwo: '',
  playerOneLogo: '',
  playerTwoLogo: '',
  roundList: [],
  playAddress: '',
  playAddressName: '',
  playScore: '',
  status: ''
})
const activeName = ref('first')
const getScore = async () => {
  competionPlay({
    id: route.query.id,
    matchId: route.query.matchId
  }).then(res=>{
    playData.playerOneOneScore = res.playerOneOneScore;
    playData.playerOneTwoScore = res.playerOneTwoScore;
    playData.playerOneThreeScore = res.playerOneThreeScore;
    playData.playerOneFourScore = res.playerOneFourScore;
    playData.playerOneFiveScore = res.playerOneFiveScore;
    playData.playerTwoOneScore = res.playerTwoOneScore;
    playData.playerTwoTwoScore = res.playerTwoTwoScore;
    playData.playerTwoThreeScore = res.playerTwoThreeScore;
    playData.playerTwoFourScore = res.playerTwoFourScore;
    playData.playerTwoFiveScore = res.playerTwoFiveScore;
    playData.playerOneTotalScore = res.playerOneTotalScore;
    playData.playerTwoTotalScore = res.playerTwoTotalScore;
    playData.playerOne = res.playerOne;
    playData.playerTwo = res.playerTwo;
    playData.playerOneLogo = res.playerOneLogo;
    playData.playerTwoLogo = res.playerTwoLogo;
    playData.roundList = res.roundList;
    playData.playAddress = res.playAddress;
    playData.playAddressName = res.playAddressName;
    playData.status = res.status
    playData.playScore = res.playScore
  })
}

const createRoundItem = () => {
  return {
    scoreId: undefined,
    matchId: undefined,
    scoreNo: 0,
    playOneTotal: 0,
    playTwoTotal: 0,
    round1: 0,
    round2: 0,
    round3: 0,
    round4: 0,
    round5: 0,
    round6: 0,
    round7: 0,
    round8: 0,
    round9: 0,
    round10: 0,
    round11: 0,
    round12: 0,
    round13: 0,
    round14: 0,
    round15: 0,
    round16: 0,
    round17: 0,
    round18: 0,
    round19: 0,
    round20: 0,
    round21: 0,
    round22: 0,
    round23: 0,
    round24: 0,
    round25: 0,
    round26: 0,
    round27: 0,
    round28: 0,
    round29: 0,
    round30: 0,
    round31: 0,
    round32: 0,
    round33: 0,
    round34: 0,
    round35: 0,
    round36: 0,
    round37: 0,
    round38: 0,
    round39: 0,
    round40: 0,
    round41: 0,
    round42: 0,
    round43: 0,
    round44: 0,
    round45: 0,
    round46: 0,
    round47: 0,
    round48: 0,
    round49: 0,
    round50: 0,
    round51: 0,
    round52: 0,
    round53: 0,
    round54: 0,
    round55: 0,
    round56: 0,
    round57: 0,
    round58: 0,
    round59: 0,
    round60: 0,
    startTime: undefined,
    endTime: undefined,
    winTeamNo: undefined,
    isEdit: true
  }
}
const scoreActive = ref(0)
const scoreCurrentRound = ref(0)
const handleSelectRound = (roundItem:any,index:any) => {
  scoreCurrentRound.value = roundItem
  scoreActive.value = index
}
const handleRestRoundItem = (round: any,index: Number) => {
  if(round['round'+index]==1){
    round.playOneTotal = round.playOneTotal - 1
  }else if(round['round'+index]==2){
    round.playTwoTotal = round.playTwoTotal - 1
  }
  round['round'+index] = 0
}
const handleScoreRedTeam = (round:any) => {
  console.log(scoreActive.value)
  if(scoreActive.value<0||scoreActive.value>60){
    feedback.msg("定位异常")
    return
  }
  let currentRound = round['round'+scoreActive.value];
  if(currentRound){
    if(currentRound == 2) {
      round['round'+scoreActive.value] = 1
      round.playOneTotal = round.playOneTotal + 1
      round.playTwoTotal = round.playTwoTotal - 1
    }
  }else{
    round['round'+scoreActive.value] = 1
    scoreActive.value = scoreActive.value + 1
    if(round.playOneTotal=='-'){
      round.playOneTotal = 0;
    }
    round.playOneTotal = round.playOneTotal + 1
  }
  checkWinner(round)
}

const handleScoreBlueTeam = (round:any) => {
  if(scoreActive.value<0||scoreActive.value>60){
    feedback.msg("定位异常")
    return
  }
  let currentRound = round['round'+scoreActive.value];
  if(currentRound) {
    if (currentRound == 1) {
      round['round'+scoreActive.value] = 2
      round.playOneTotal = round.playOneTotal - 1
      round.playTwoTotal = round.playTwoTotal + 1
    }
  }else{
    round['round'+scoreActive.value] = 2
    scoreActive.value = scoreActive.value + 1
    if(round.playTwoTotal=='-'){
      round.playTwoTotal = 0;
    }
    round.playTwoTotal = round.playTwoTotal + 1
  }
  checkWinner(round)
}

// 检查是否有选手获胜的函数
const checkWinner = (round:any) => {
  const scoreDiff = Math.abs(round.playOneTotal - round.playTwoTotal);
  // 用于存储获胜者编号，初始为 null
  let winner = ref<number | null>(null);
  // 满足 21 分且分差大于等于 2 的条件，判定获胜
  if ((round.playOneTotal >= playData.playScore || round.playTwoTotal >= playData.playScore) && scoreDiff >= 2) {
    winner.value = round.playOneTotal > round.playTwoTotal ? 1 : 2;
    const windTeam = winner.value==1?'红队':'蓝队'
    feedback.alert("胜方是："+windTeam)
  }
  // 若有选手先达到 30 分，则该选手获胜
  else if (round.playOneTotal >= 30) {
    winner.value = 1;
    feedback.alert("胜方是：红队")
  } else if (round.playTwoTotal >= 30) {
    winner.value = 2;
    feedback.alert("胜方是：蓝队")
  }
};
const currentNo = ref(0)
const handleSubmitScore = async (round:any) => {
  currentNo.value = 0
  await competitionPlayScoreEdit(round)
  getScore()
}

const handleAddItem = () => {
  console.log(currentNo)
  console.log(currentNo.value!=0)
  if(currentNo.value!=0){
    return
  }
  scoreActive.value = 1;
  let num = 1;
  if(playData.roundList&&playData.roundList.length>0){
    num = playData.roundList.length + 1
  // }else{
  //   playData.roundList = ref([]);
  }
  let roundItem = createRoundItem()
  roundItem.scoreNo = num;
  currentNo.value = num
  roundItem.matchId = route.query.matchId
  playData.roundList.push(roundItem)
}

const handleChange = (name: any) => {
  activeName.value = name;
  if(activeName.value=='first'){
    getDetails();
  }else if(activeName.value=='second'){
    getScore();
  }
}
const formatName = (name:string) => {
  if(name.indexOf(",")>0){
    return name.split(",");
  }
  return [name];
}
const handleSave = async () => {
  if(activeName.value=='first') {
    if (route.query.matchId) {
      await competitionPlayEdit(formData)
    }
  }else if(activeName.value =='second'){

  }
  removeTab()
  router.back()
}
route.query.id && getDetails()
</script>
<style lang="scss" scoped>
.m-box {
  width: 1200px;
  background: #ffffff;
  border-radius: 10px;
  margin-bottom: 16px;
  padding: 24px 16px;
}

.m-process {
  justify-content: space-around;
}

.m-process {
  margin: 0 auto 20px;
  width: 1100px;
  background: url('@/assets/images/bg_zbt.png') no-repeat center top;
  display: flex;
  flex-direction: row;
  padding-top: 10px;
}

.m-processLf, .m-processRt {
  width: 330px;
}


.m-processLf {
  justify-content: flex-end;
}

.m-processLf, .m-processRt, .m-processAgainst {
  flex: 1;
  display: flex;
  flex-direction: row;
  text-align: center;
}

.m-processLf, .m-processRt, .m-processAgainst {
  flex: none;
}

.m-processLf .u-list, .m-processRt .u-list {
  width: 66px;
}

.m-processLf .u-list, .m-processRt .u-list {
  width: 80px;
}

.m-process .u-list p:first-child {
  margin-bottom: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: #181818;
}

.m-processAgainst .u-time {
  flex: none;
  width: 212px;
}

.m-process .u-list p:last-child {
  height: 48px;
  line-height: 48px;
  font-size: 20px;
  color: #666;
}

.m-processAgainst .u-time p:first-child {
  font-size: 16px;
  color: rgba(255, 255, 255, .6);
}

.m-process .u-list p:first-child {
  margin-bottom: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 14px;
  color: rgba(255, 255, 255, .6);
}

.m-processAgainst .u-time p:last-child {
  font-size: 34px;
}


.m-processAgainst .u-list p:first-child {
  color: #fff;
}

.u-dot-pad {
  padding: 0 16px;
  display: inline-block;
}

.m-processAgainst .u-time p:first-child {
  font-size: 16px;
  color: #181818;
}
.score-header >span:first-child,.score-header >span:last-child{
  width: 140px;
}
.score-header >span{
  display: inline-block;
  width: calc((100% - 280px)/30);
  text-align: center;

}
.score-header >span:last-child {
  width: 140px;
  text-align: center;
}
.score-one,.score-two{
  height: 15px;
  width: 15px !important;
  padding: 0;
  right: 0;
  border-radius: 50%;

}
.score-current .score-active{
  border: 1px solid #000;
}
.score-yuan{
  height: 15px;
  width: 15px !important;
  padding: 0;
  right: 0;
  border-radius: 50%;
  background-color: #ddd;
  cursor: pointer;
}
.score-team{
  width: 140px;
  height: 42px;
  padding: 5px 0;
  display: inline-table;
  text-align: center;
  line-height: 52px;
  &>span{
    text-align: center;
    vertical-align: middle;
    &>span{
      display: block;
      height: 21px;
      line-height: 21px;
    }
  }
}
.score-one{
  background-color: red;
}
.score-two{
  background-color: blue;
}
.score-content{
  margin: 5px 0;
  width: calc(100% - 280px);
  display: inline-table;
  text-align: center;
}
.score-content span{
  text-align: center;
}
.score span span{
  display: inline-block;
  //width: 100%;
  text-align: center;
}
.score-content{
  margin: 5px 0;
  width: calc(100% - 280px);
  display: inline-table;
  text-align: center;
}
.score-content span{
  text-align: center;
}
.score span span{
  display: inline-block;
  text-align: center;
}
.score-content .score >span{
  width: calc(100% / 30);
}
.score-content .score >span >span{
  width: calc(100% / 30);
}
.score-two{
  background-color: blue;
}
.score-header{
  margin: 5px 0;
}
.disabled-span {
  pointer-events: none;
  color: #ccc; /* 可添加样式让其视觉上看起来不可用 */
}
.u-team{
  &>span{
    display: block;
    //height: 21px;
    //line-height: 21px;
    font-size: 20px;
  }
}
</style>
